<template>
  <div class="header">
    <span v-for="route in list" :key="route.name" @click="() => router.push(route.path)">
      {{ route.name }}
    </span>
  </div>
  <div style="margin: 10px; height: calc(100vh - 80px)">
    <router-view v-slot="{ Component }">
      <transition name="slide-fade">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<script lang="ts" setup>
  import routes from 'virtual:generated-pages'
  const list = reactive(routes)
  const router = useRouter()
</script>
<style lang="scss" scoped>
  @import '@/styles/animation.scss';
  .header {
    height: 60px;
    text-align: center;
    line-height: 60px;

    cursor: pointer;
    box-shadow: 1px 5px 8px rgb(0, 0, 0, 8%);
    span {
      margin: 0 30px;
      &:hover {
        color: $color;
      }
    }
  }
</style>
